<template>
    <div class="dan">
        <!-- 双向绑定 -->
        dan1
        <input v-model="tiptRef.name" type="text" @input="iptChange()" />
        {{ tiptRef.name }}
        <button @click="putipt()">修改</button>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
let iptRef = ref("")
let tiptRef = reactive({
    name: 123
})
// console.log(iptRef);
// console.log(tiptRef);

function iptChange() {
    // console.log(iptRef.value);//ref
    console.log(tiptRef.name);//reactive
}
function putipt() {
    tiptRef.name = "123456"
}
</script>
<style>
/* .dan {
    background-color: aqua;
    width: 100%;
    height: 100%;
    font-size: 30px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-around;
} */
</style>